<template>
  <div class="reportDetailContainer">
    <div class="wrapper" id="wrapper">
      <!-- 头部 -->
      <van-nav-bar title="升降机监测" left-arrow @click-left="onClickLeft">
      </van-nav-bar>
      <div class="wetherCont">
        <!-- 值 -->
        <div class="weather f fb">
          <div class="middleCont_left fl">
            <p class="top margin25">
              {{
                replaceEmpty(
                  !isNaN(headerStatistics.todayLoad) &&
                    Math.round(headerStatistics.todayLoad * 100) / 100,
                  "~"
                )
              }}
            </p>
            <p class="top1">今日载重</p>
          </div>
          <div class="middleCont_middle"></div>
          <div class="middleCont_left fl">
            <p class="top margin25">
              {{
                replaceEmpty(
                  !isNaN(headerStatistics.avgLoad) &&
                    Math.round(headerStatistics.avgLoad * 100) / 100,
                  "~"
                )
              }}
            </p>
            <p class="top1">日均载重</p>
          </div>
          <div class="middleCont_middle"></div>
          <div class="middleCont_left fl">
            <p class="top margin25">
              {{
                replaceEmpty(
                  !isNaN(headerStatistics.countLoad) &&
                    Math.round(headerStatistics.countLoad * 100) / 100,
                  "~"
                )
              }}
            </p>
            <p class="top1">累计载重</p>
          </div>
        </div>
      </div>

      <div class="reportCont reportCont1">
        <!-- 预警 -->
        <div class="yujin">
          <div class="contTitle f fs">
            <van-icon name="arrow" class="right" />预警
          </div>
          <div class="weather f fb">
            <div class="middleCont_left fl">
              <p>
                今日: <span>{{ headerStatistics.warnCount }}</span>
              </p>
            </div>
            <div class="middleCont_middle"></div>
            <div class="middleCont_left fl">
              <p>
                开工累计:
                <span>{{ headerStatistics.totalWarn }}</span>
              </p>
            </div>
          </div>
        </div>
        <!-- 环境评价 -->
        <div class="hjpj">
          <div class="top f fb">
            <div class="left fl">
              <ul class="title_ul f">
                <li
                  class="title_li"
                  v-for="(item, index) in btnData"
                  :key="index"
                  :class="{ title_li_act: titleIndex == index }"
                  @click="titleTap(index, item.creanceId)"
                >
                  {{ item.liftName }}
                </li>
              </ul>
            </div>
            <div class="right1">
              <ul class="title_ul1 f">
                <li
                  class="title_li1 f fc"
                  v-for="(item, index) in titleList1"
                  :key="index"
                  :class="{ title_li_act1: titleIndex1 == index }"
                  @click="titleTap1(index, item.id)"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="lineH">
        <!-- 实时监测 -->
        <div class="towercont">
          <div class="contTitle f fb">
            <p class="title">实时监测</p>
            <p class="data f fc" @click="toHistory()">历史数据</p>
          </div>
          <ul class="tower_ul">
            <li
              class="tower_li f fb"
              v-for="(item, index) in inspectParams"
              :key="index"
            >
              <div class="left f fc" :class="judgeProgressStyle(item).class">
                {{
                  judgeProgressStyle(item).text == "~"
                    ? "空值"
                    : judgeProgressStyle(item).text
                }}
              </div>
              <div class="right fl">
                <div class="top f fb">
                  <span
                    >{{ item.name || ""
                    }}{{ `${item.range[0]}${item.unit}` }}</span
                  >
                  <span>{{ `${item.range[1]}${item.unit}` }}</span>
                </div>
                <!-- <el-progress
                  :status="
                    judgeProgressStyle(item).percent >= 100
                      ? 'exception'
                      : 'active'
                  "
                  :percent="judgeProgressStyle(item).percent"
                  :strokeWidth="12"
                  :strokeColor="judgeProgressStyle(item).color"
                ></el-progress> -->
                <el-progress
                  :text-inside="true"
                  :percentage="item.value"
                  :strokeWidth="20"
                  color="#1AAB03"
                ></el-progress>
              </div>
            </li>
          </ul>
        </div>
        <!-- 视频 -->
        <div class="towercont">
          <div class="vedio">
            <myVideo
              id="vd"
              ref="video"
              class="vedioa"
              :url="personalData.monitorVideoUrl"
            />
            <!-- <img src="../../imgs/reportBg.jpg" alt="" class="vedioa" /> -->
          </div>
        </div>
        <!-- 作业人员 -->
        <div class="towercont">
          <div class="towerPerson f vfs">
            <div class="left">
              <div class="grzp">
                <img
                  :src="personalData.photo ? personalData.photo : nodata"
                  alt=""
                />
              </div>

              <p>姓名：{{ personalData.staffName }}</p>
              <p>打卡时间：{{ personalData.punchTime }}</p>
              <p>
                连续工作时长：{{
                  personalData.workingHours >= 0
                    ? personalData.workingHours > 0
                      ? personalData.workingHours + "小时"
                      : personalData.workingMinute + "分钟"
                    : (personalData.punchTime &&
                        moment(personalData.punchTime).fromNow(true)) ||
                      "-"
                }}
              </p>
              <p>联系方式：{{ personalData.mobile }}</p>
            </div>
            <div class="left">
              <div class="tzzg">
                <img
                  :src="
                    personalData.specialCardImg
                      ? personalData.specialCardImgnodata
                      : nodata
                  "
                  alt=""
                />
              </div>

              <p>特种作业资格证：{{ personalData.specialCardNo }}</p>
              <p>
                有效期至：{{
                  personalData.useTime && personalData.useTime.slice(0, 10)
                }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import myVideo from "../vedioCommon.vue";
var projectId = localStorage.getItem("projectid");
import {
  subscriptionPost,
  hAllNumberPost,
  getDeviceLatestPunch,
  basicInformationPost,
} from "@/api/api";
//websocket
import SockJS from "sockjs-client";
import Stomp from "stompjs";
const baseURL = "http://39.108.81.42:9080"; // 正式服地址
function initInspectParams() {
  return [
    {
      name: "载重",
      value: undefined, // 实际值
      range: ["-", "-"], //最大值 和最小值
      unit: "t", // 单位
      limit: [undefined, undefined], // 超过多少就范围报警
    },
    {
      name: "楼层",
      value: undefined,
      range: ["-", "-"],
      unit: "F",
      limit: [0, 0],
    },
    {
      name: "高度",
      value: undefined,
      range: ["-", "-"],
      unit: "m",
      limit: [undefined, undefined],
    },
    {
      name: "速度",
      value: undefined,
      range: ["-", "-"],
      unit: "m/s",
      limit: [undefined, undefined],
    },
    {
      name: "倾角",
      value: undefined,
      range: ["-", "-"],
      unit: "°",
      limit: [undefined, undefined],
    },
    {
      name: "风速",
      value: undefined,
      range: ["-", "-"],
      unit: "m/s",
      limit: [undefined, undefined],
    },
  ];
}
export default {
  components: {
    myVideo,
  },
  data() {
    return {
      //日历
      nodata: require("../../imgs/nodata.png"),
      titleIndex: 0,
      titleList1: [
        { name: "左轿箱", id: "" },
        { name: "右轿箱", id: "" },
      ],
      titleIndex1: 0,
      // 头部统计
      headerStatistics: {
        avgLoad: 0,
        countLoad: 0,
        removeWarnCount: 0,
        todayLoad: 0,
        totalRemoveWarn: 0,
        totalWarn: 0,
        warnCount: 0,
        updateTime: 1572254599330,
      },
      realTimeDetection: [], // 实时监控数据
      // 实时监测的参数
      inspectParams: initInspectParams(),
      inspectParamsLeft: initInspectParams(),
      btnData: [],
      serialData: [],
      isUpdate: true, // 是否开始更行
      creanceId: "",
      personalData: [],
      deviceId1: "",
      realData: [],
    };
  },
  mounted() {
    //面板
    // 请求塔吊数据量
    this.towerMessage();
    // 请求订阅
    this.subscriptionPost1();
  },
  filters: {
    conversion(data) {
      //小于万次数
      if (data > 10000) {
        return (data / 10000).toFixed(1) + "万";
      } else {
        return data;
      }
    },
  },
  watch: {
    deviceId1: function (newVal, oldVal) {
      // TO DO
      var that = this;
      if (that.realData.length > 0) {
        var v = this.realData;
        v.forEach((obj) => {
          if (parseInt(obj.deviceId) == newVal) {
            that.inspectParams[0].value = obj.liftLoad;
            // 楼层
            that.inspectParams[1].value = obj.floor;
            // 楼层
            that.inspectParams[2].value = obj.height;
            // 速度
            that.inspectParams[3].value = obj.speed;
            // 倾角
            that.inspectParams[4].value = obj.angle;
            // 风速
            that.inspectParams[5].value = obj.windSpeed || 0;
            // that.paintChart_1(obj.body);
          }
        });
      }
    },
  },
  methods: {
    // 更新基础数据
    updateData(data) {
      var that = this;
      this.realTimeDetection = data;
      data.forEach((v) => {
        if (parseInt(v.deviceId) == that.deviceId1) {
          // 对象里的唯一标识id
          this.inspectParams[0].limit = [
            v.minLoad != null ? v.minLoad : "-",
            v.maxLoad != null ? v.maxLoad : "-",
          ];
          this.inspectParams[0].range = [
            v.minLoad != null ? v.minLoad : "-",
            v.maxLoad != null ? v.maxLoad : "-",
          ];
          // 楼层
          this.inspectParams[1].limit = [
            v.minFloor != null ? v.minFloor : "-",
            v.maxFloor != null ? v.maxFloor : "-",
          ];
          this.inspectParams[1].range = [
            v.minFloor != null ? v.minFloor : "-",
            v.maxFloor != null ? v.maxFloor : "-",
          ];
          // 高度
          this.inspectParams[2].limit = [
            v.minHeight != null ? v.minHeight : "-",
            v.maxHeight != null ? v.maxHeight : "-",
          ];
          this.inspectParams[2].range = [
            v.minHeight != null ? v.minHeight : "-",
            v.maxHeight != null ? v.maxHeight : "-",
          ];
          // 速度
          this.inspectParams[3].limit = [
            v.minSpeed != null ? v.minSpeed : "-",
            v.maxSpeed != null ? v.maxSpeed : "-",
          ];
          this.inspectParams[3].range = [
            v.minSpeed != null ? v.minSpeed : "-",
            v.maxSpeed != null ? v.maxSpeed : "-",
          ];
          // 倾角
          this.inspectParams[4].limit = [
            v.minAngle != null ? v.minAngle : "-",
            v.maxAngle != null ? v.maxAngle : "-",
          ];
          this.inspectParams[4].range = [
            v.minAngle != null ? v.minAngle : "-",
            v.maxAngle != null ? v.maxAngle : "-",
          ];
          // 风速
          this.inspectParams[5].limit = [
            v.minWindSpeed != null ? v.minWindSpeed : "-",
            v.maxWindSpeed != null ? v.maxWindSpeed : "-",
          ];
          this.inspectParams[5].range = [
            v.minWindSpeed != null ? v.minWindSpeed : "-",
            v.maxWindSpeed != null ? v.maxWindSpeed : "-",
          ];
        }
      });
    },
    judgeProgressStyle(inspectParam = {}, precision = 0) {
      const { value, limit } = inspectParam;
      const min = inspectParam.range[0];
      const max = inspectParam.range[1];
      const texts = ["正常", "超限", "~"];
      const classes = ["safe", "danger", "default"];
      const colors = ["#04BD70", "#E6392F", "#555"];
      // 0 正常， 1超， 2 无
      const judgeStatus =
        !isNaN(min) && !isNaN(max) && limit && limit.length === 2
          ? value < limit[0] || value > limit[1]
            ? 1
            : 0
          : 2;
      if (isNaN(value)) {
        return {
          text: "~",
          class: "default",
          color: "#ececec",
          percent: 0,
        };
      }
      const percent =
        (!isNaN(min) &&
          !isNaN(max) &&
          Math.round(((100 * (value - min)) / (max - min)) * 10 ** precision) /
            10 ** precision) ||
        0;
      return {
        text: texts[judgeStatus],
        class: classes[judgeStatus],
        color: colors[judgeStatus],
        percent,
      };
    },
    replaceEmpty(data, placeholder = "", maxLength) {
      if (data === null || data === undefined || data === false)
        return placeholder;
      if (maxLength) {
        return data.length > maxLength
          ? `${data.slice(0, maxLength)}...`
          : data;
      }
      return data;
    },
    subscriptionPost1() {
      this.Request(subscriptionPost(projectId)).then((res) => {
        if (res.status == "200") {
          this.initWebSocket(res.body);
        } else {
          this.$message({
            type: "error",
            message: res.message,
            center: "true",
          });
        }
      });
    },
    //信息公开
    MessageOpen(deviceId) {
      var params = {
        projectId: projectId,
        creanceId: this.creanceId,
        deviceId: deviceId,
      };
      this.Request(getDeviceLatestPunch(params)).then((res) => {
        if (res.status == "200") {
          this.personalData = res.body;
        } else {
          this.$message({
            type: "error",
            message: res.message,
            center: "true",
          });
        }
      });
    },
    //升降机基础信息
    basicInformation(creanceId) {
      var params = {
        projectId: projectId,
        creanceId: creanceId,
      };
      this.Request(basicInformationPost(params)).then((res) => {
        if (res.status == "200") {
          // this.personalData = res.body;
          //  this.personalData.monitorVideoUrl = v.monitorVideoUrl; // 视频地址;
          this.updateData(res.body); // 更新基础数据
        } else {
          this.$message({
            type: "error",
            message: res.message,
            center: "true",
          });
        }
      });
    },

    // 获取塔吊数据
    towerMessage() {
      this.Request(hAllNumberPost(projectId)).then((res) => {
        if (res.status == "200") {
          this.btnData = res.body || [];
          var data = this.btnData[0].creanceId;
          this.creanceId = data;
          data = data.split("-");
          this.titleList1[0].id = data[0];
          this.titleList1[1].id = data[1];
          // this.serialData = this.btnData[0];
          this.MessageOpen(this.titleList1[0].id);
          this.basicInformation(this.creanceId);
          this.deviceId1 = this.titleList1[0].id;
        } else {
          this.$message({
            type: "error",
            message: res.message,
            center: "true",
          });
        }
      });
    },
    initWebSocket(data) {
      // debugger;
      var that = this;
      const user = /39\.108/.test(baseURL)
        ? {
            userName: "pm_consume",
            userPassword: "123456",
            class: "vhost_01",
          }
        : {
            userName: "test",
            userPassword: "123456",
            class: "v_01",
          }; // 账号信息
      var datas = `/amq/queue/${data}`;
      // Stomp.js boilerplate
      // var client = Stomp.client("ws://192.168.1.127:15674/ws");
      const url = baseURL.replace("http", "ws").replace(/:\d+/, ":15674");
      var client = Stomp.client(`${url}/ws`);
        client.debug = null; // 不打印日志
      // 收入信息
      var on_connect = function (x) {
        client.subscribe(datas, function (d) {
          //  print_first(d.body);
          var obj = JSON.parse(d.body);
          if (that.isUpdate) {
            // 头部统计
            if (obj.type === "LOAD_AND_WARN_COUNT") {
              // console.log("LOAD_AND_WARN_COUNT", obj);
              that.headerStatistics = obj.body; //线上
              that.headerStatistics.updateTime = obj.updateTime; // 头部历史数据
            } else if (obj.type === "HISTORY_NOTICE") {
               //console.log("HISTORY_NOTICE", obj);
              // 只显示3条 有第四条 就把第四条删掉
              // if (that.historicalData.length < 3) {
              //   that.historicalData.push(obj.body.split("_"));
              // } else {
              //   that.historicalData.unshift(obj.body.split("_"));
              //   that.historicalData.splice(3, 1);
              // }
            } else if (obj.type === "BASE_DATA_LIFT") {
              //console.log("BASE_DATA_LIFT", obj);
              if (parseInt(obj.body.deviceId) == that.deviceId1) {
                let v = obj.body;
            
                for (var prop in v) {
                  if (v[prop] === 0) {
                    v[prop] = "0";
                  }
                }
                // 载重
                that.inspectParams[0].limit = [
                  v.minLoad || "-",
                  v.maxLoad || "-",
                ];
                that.inspectParams[0].range = [
                  v.minLoad || "-",
                  v.maxLoad || "-",
                ];
                // 楼层
                that.inspectParams[1].limit = [
                  v.minFloor || "-",
                  v.maxFloor || "-",
                ];
                that.inspectParams[1].range = [
                  v.minFloor || "-",
                  v.maxFloor || "-",
                ];
                // 楼层
                that.inspectParams[2].limit = [
                  v.minHeight || "-",
                  v.maxHeight || "-",
                ];
                that.inspectParams[2].range = [
                  v.minHeight || "-",
                  v.maxHeight || "-",
                ];
                // 速度
                that.inspectParams[3].limit = [
                  v.minSpeed || "-",
                  v.maxSpeed || "-",
                ];
                that.inspectParams[3].range = [
                  v.minSpeed || "-",
                  v.maxSpeed || "-",
                ];
                // 倾角
                that.inspectParams[4].limit = [
                  v.minAngle || "-",
                  v.maxAngle || "-",
                ];
                that.inspectParams[4].range = [
                  v.minAngle || "-",
                  v.maxAngle || "-",
                ];
                // 倾角
                that.inspectParams[4].limit = [
                  v.minAngle || "-",
                  v.maxAngle || "-",
                ];
                that.inspectParams[4].range = [
                  v.minAngle || "-",
                  v.maxAngle || "-",
                ];
                // 风速
                that.inspectParams[5].limit = [
                  v.minWindSpeed || "-",
                  v.maxWindSpeed || "-",
                ];
                that.inspectParams[5].range = [
                  v.minWindSpeed || "-",
                  v.maxWindSpeed || "-",
                ];
                that.realTimeDetection[0] = v;
              }
              //  实时数据(升降机)
            } else if (obj.type === "REAL_DATA_LIFT") {
             // console.log("REAL_DATA_LIFT", obj);
              that.realData.push(obj.body);
              if (parseInt(obj.body.deviceId) == that.deviceId1) {
                that.inspectParams[0].value = obj.body.liftLoad;
                // 楼层
                that.inspectParams[1].value = obj.body.floor;
                // 楼层
                that.inspectParams[2].value = obj.body.height;
                // 速度
                that.inspectParams[3].value = obj.body.speed;
                // 倾角
                that.inspectParams[4].value = obj.body.angle;
                // 风速
                that.inspectParams[5].value = obj.body.windSpeed || 0;
                // that.paintChart_1(obj.body);
              }
            }
          }
        });

        // 初始化数据
        // setTimeout(() => {
        //   if (that.btnData.length > 0) {
        //     // function recursionInit(index) {
        //     //   if (index >= that.btnData.length) {
        //     //     return
        //     //   }

        //     //   const creanceId = that.btnData[index].creanceId
        //     //   initRealDeviceLift(that.projectId, creanceId)
        //     //   .then(res => {
        //     //     if (res.status === 400) {
        //     //       recursionInit(++index)
        //     //     }
        //     //   })
        //     // }

        //     // recursionInit(that.current)
        //     initRealDeviceLift(that.projectId, that.btnData[0].creanceId);
        //   }
        // }, 60);
      };
      // 失败
      var on_error = function () {
        console.log("验证MQ失败");
      };
      client.connect(
        user.userName,
        user.userPassword,
        on_connect,
        on_error,
        user.class
      );
    },
    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    //切换升降机
    titleTap(index, id) {
      this.creanceId = id;
      this.titleIndex = index;
      var data = this.btnData[index].creanceId;
      data = data.split("-");
      this.titleList1[0].id = data[0];
      this.titleList1[1].id = data[1];
      this.MessageOpen(this.titleList1[0].id);
      this.deviceId1 = this.titleList1[0].id;
      this.basicInformation(id);
    },
    //切换左右轿厢
    titleTap1(index, id) {
      this.titleIndex1 = index;
      this.MessageOpen(id);
      this.deviceId1 = id;
      this.basicInformation(this.creanceId);
    },
    toHistory() {
      this.$router.push({ path: "/elevatorHistory" });
    },
  },
};
</script>
<style lang="stylus" scoped>
@import '../../assets/common';

/deep/.el-progress-bar__innerText {
  color: #f00;
  font-size: 24px;
}

// /deep/.el-progress__text{
// font-size:16px !important;
// }
// /deep/.el-progress-bar{
// width:88% !important;
// margin-right :0;
// }
.title_li1 {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #696969;
  margin-left: 10px;
}

.title_li_act1 {
  width: 127px;
  height: 49px;
  background: #0078CB;
  border-radius: 5px;
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}

.yujin {
  width: 100%;
  height: 164px;
  background: #FFFFFF;
  box-shadow: 0px 14px 16px 0px rgba(43, 102, 253, 0.07);
  border-radius: 5px;
  margin-bottom: 30px;

  .contTitle {
    width: 100%;
    height: 70px;
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: #000000;
    padding-left: 20px;

    .right {
      color: #0084FF;
      font-size: 40px;
      font-weight: bold;
      margin-right: 14px;
    }
  }

  .weather {
    width: 100%;
    height: 70px;

    .middleCont_left {
      text-align: center;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #282828;

      span {
        font-size: 36px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #0078CB;
        margin-left: 15px;
      }
    }

    .middleCont_middle {
      width: 1px;
      height: 70px;
      background: rgba(53, 146, 243, 0.47);
    }
  }
}

.wetherCont {
  width: 100%;
  height: 300px;
  background: url('../../imgs/reportBg.jpg') no-repeat;
  background-size: 100% 100%;
  padding: 30px 0;
  box-sizing: border-box;

  .weather {
    width: 93%;
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    background: rgba(249, 255, 252, 0.2);
    border-radius: 8px;
    height: 180px;

    .middleCont_left {
      color: #fff;
      text-align: center;

      .top1 {
        font-size: 28px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        margin-bottom: 25px;
      }

      .top {
        font-weight: bold;
        font-size: 36px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #F2FE31;
        margin-bottom: 24px;
      }

      .bot {
        font-size: 24px;
        color: rgba(255, 255, 255, 0.5);
      }
    }

    .middleCont_middle {
      width: 1px;
      height: 90px;
      background: #fff;
      opacity: 0.47;
    }
  }
}

.reportCont1 {
  height: auto !important;
  padding-bottom: 0 !important;
}

.lineH {
  width: 100%;
  height: calc(100% - 700px);
  overflow-y: scroll;
  box-sizing: border-box;
}

.towercont {
  width: 100%;
  box-sizing: border-box;
  border-left: 10px solid #0078CB;
  padding-left: 30px;
  background: #fff;
  margin-bottom: 30px;

  .contTitle {
    width: 100%;
    height: 70px;
    border-bottom: 1px solid rgba(40, 40, 40, 0.2);
    margin-bottom: 30px;

    .title {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #0078CB;
    }

    .data {
      width: 137px;
      height: 55px;
      background: #0078CB;
      border-radius: 5px 0 0 5px;
      color: #FFFFFF;
      font-size: 24px;
    }
  }

  .tower_ul {
    width: 100%;
    padding-right: 30px;
    box-sizing: border-box;

    .tower_li {
      width: 100%;
      height: 130px;
      border-bottom: 1px solid rgba(40, 40, 40, 0.2);

      .left {
        width: 67px;
        height: 67px;
        border-radius: 100%;
        border: 4px solid #1AAB03;
        flex-shrink: 0;
        margin-right: 28px;
        color: #1AAB03;
      }

      .right {
      }
    }
  }

  // 视频
  .vedio {
    width: 100%;
    padding: 30px 30px 30px 0;
    box-sizing: border-box;

    .vedioa {
      width: 100%;
      height: 290px;
    }
  }

  // 作业人员
  .towerPerson {
    width: 100%;
    padding: 30px 30px 30px 0;
    box-sizing: border-box;

    .left {
      width: 50%;
      text-align: center;

      .grzp {
        width: 183px;
        height: 198px;
        background: #ccc;
        margin-bottom: 10px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .tzzg {
        width: 320px;
        height: 198px;
        background: #ccc;
        margin-bottom: 10px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      p {
        text-align: left;
        margin-bottom: 15px;
      }

      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }
  }
}
</style>